<template>
    <div>
        <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>单位管理</el-breadcrumb-item>
      <el-breadcrumb-item>单位总览</el-breadcrumb-item>
    </el-breadcrumb>
        <!-- 图表局域 -->
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
   单位数量 <span>101</span>
</el-card>
      
      </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  已交会费单位 <span>1</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  未交会费单位 <span>100</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
         平台已考执照数 <span>0</span>
</el-card>
      
      </div></el-col>
</el-row>

<div>
    <!-- 详细图表区域 -->
  <el-card class="box-card">
      <ve-line :data="chartData" class="ve-line"></ve-line>
      <el-row>
        <el-col :span="12"><span>单位构成</span>
<ve-pie :data="piechartData"></ve-pie>
        </el-col>
        <el-col :span="12"><span>资源</span>
           <ve-gauge :data="gachartData"></ve-gauge>
        </el-col>
      </el-row>
        
       
</el-card>
    
</div>
    </div>


</template>
<script>
  export default {
    data () {
      return {
        chartData: {
          columns: ['日期', '新增单位'],
          rows: [
            { '日期': '2020-05-22', '新增单位': 32 },
            { '日期': '2020-05-23', '新增单位': 12 },
            { '日期': '2020-05-24', '新增单位': 92 }
          ]
        },
         piechartData: {
          columns: ['日期', '会员'],
          rows: [
            
            { '日期': '已交', '会员': 1 },
           { '日期': '未交', '会员': 100 },
            
          ]
        },
       gachartData: {
          columns: ['type', 'a', 'b', 'value'],
          rows: [
            { type: '速度', value: 80, a: 50, b: 2 }
          ]
        }
      }
    }
  }
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}


.box-card{
margin: 5px;
height: 100%;
width: 100%;

}
.ve-line{
 width: 200px; 
height: 100px;

}
.num{
background-color:write;
font-family: "微软雅黑";
font-size: 10px;
height: 50px;
width: 100%;
margin: 5px;
}
.num:hover{
-webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    background-color:yellowgreen;
  
}

</style>